<template>
  <div>
    <Sticky>
      <NavBar fixed class='hd-navbar'>
        <template #title>
          <span class="hd-title">我的</span>
        </template>
        <template #right>
          <Icon name="setting-o" size="18" color="#fff" class='g-mr-10'/>
          <Icon name="chat-o" dot size='18' color='#fff'/>
        </template>
      </NavBar>
    </Sticky>
    <div class='user-info g-padding-10'>
      <div class="g-align-middle">
        <Icon name="user-circle-o" size='54' color='#fff' class='g-mr-10'/> 
        <div>
          <p class='g-mb-5 g-text-bold'>代号007</p>
          <Tag round plain >小白信用99</Tag>
        </div>
      </div>
      <ul class='g-flex g-text-center g-mt-10'>
        <li class='g-flex-1'>
          <p class='g-text-bold g-font-16'>2</p>
          <p class='g-font-12'>商品关注</p>
        </li>
        <li class='g-flex-1'>
          <p class='g-text-bold g-font-16'>4</p>
          <p class='g-font-12'>店铺关注</p>
        </li>
        <li class='g-flex-1'>
          <p class='g-text-bold g-font-16'>0</p>
          <p class='g-font-12'>喜欢的内容</p>
        </li>
        <li class='g-flex-1'>
          <p class='g-text-bold g-font-16'>99</p>
          <p class='g-font-12'>浏览记录</p>
        </li>
      </ul>
    </div>
    <Grid :border='false' :column-num="5" class='g-mt-10' clickable>
      <GridItem icon="peer-pay" text="代付款"/>
      <GridItem icon="tosend" text="代收货"/>
      <GridItem icon="records" text="待评价" badge='8'/>
      <GridItem icon="after-sale" text="退还/售后"/>
      <GridItem icon="description" color='#e43130' text="我的订单" />
    </Grid>
    <ul class='g-flex g-text-center g-mt-10 bg-white g-padding-10'>
        <li class='g-flex-1'>
          <p class='g-text-bold g-font-16'>12</p>
          <p class='g-font-12'>京豆</p>
        </li>
        <li class='g-flex-1'>
          <p class='g-text-bold g-font-16'>0</p>
          <p class='g-font-12'>优惠券</p>
        </li>
        <li class='g-flex-1'>
          <p class='g-text-bold g-font-16'>0.00</p>
          <p class='g-font-12'>白条</p>
        </li>
        <li class='g-flex-1'>
          <p class='g-text-bold g-font-16'>0.00</p>
          <p class='g-font-12'>金条借款</p>
        </li>
        <li class='g-flex-1'>
          <p class='g-text-bold g-font-16 g-text-primary'>0.00</p>
          <p class='g-font-12'>我的钱包</p>
        </li>
      </ul>
      <Panel title="工具与服务"  status="查看更多 >" class='g-mt-10'>
         <Grid :border='false' :column-num="4" class='g-mt-10' clickable>
          <GridItem icon="service-o" text="客户服务"/>
          <GridItem icon="send-gift-o" text="寄件服务"/>
          <GridItem icon="newspaper-o" text="主题换肤" dot/>
          <GridItem icon="balance-pay" text="闲置换钱"/>
          <GridItem icon="phone-o" text="问医生"/>
          <GridItem icon="todo-list-o" text="核酸检测"/>
          <GridItem icon="underway-o" text="我的预约"/>
          <GridItem icon="diamond-o" text="京东会员"/>
        </Grid> 
      </Panel>
      <div class='g-padding-10'>
        <Button type="danger" block @click="logout">退出登录</Button>
      </div>
  </div>
</template>

<script>
import {NavBar,Icon,Sticky,Tag,Grid,GridItem,Panel,Button  } from 'vant'
export default {
  name: 'App',
  components: {NavBar,Icon,Sticky,Tag,Grid,GridItem ,Panel ,Button},
  props: {
   
  },
  data() {
    return {
      active: 0
    }
  },
  methods: {
    logout() {
      sessionStorage.removeItem('auth');
      this.$router.replace('/home')
    }
  },
  computed: {

  },
  watch: {

  },

}
</script>

<style scoped lang='scss'>
.hd-navbar {
  background: none;
  .hd-title {
    color: rgba(0,0,0,0);
  }
  &::after {display: none;}
}
.user-info {
  background: linear-gradient(45deg, #ff4a00, #ffb400);
  color: #fff;
  padding-top: 50px;
}
</style>
